<template>
	<view class="newNotice">
		<view style="height: 160rpx;">
			<view class="mail_List" style="position: fixed;">
				<view class="mail gradient" style="font-weight: 700;">
					<view class="order">社区活动</view>
				</view>
			</view>
			<view class="icon" style="position: fixed;z-index: 99;">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>
		</view>
		<view class="card">
			<uni-card class="second_card" style="margin: 0;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="一、标题:">
						<u-input v-model="form.type" placeholder-style="color: #cccccc; text-align: right;"
							placeholder="请输入标题" />
					</u-form-item>
					<u-form-item label="二、活动主题:">
						<u-input v-model="form.address" placeholder-style="color: #999999; text-align: right;"
							placeholder="送真情服务，建和谐社区" disabled="true"  />
					</u-form-item>
					<u-form-item label="三、活动时间:">
						<u-input v-model="form.title" :disabled="true" :type="newList==''? 'select' : 'text'"
							:select-open="show" placeholder-style="color: #cccccc; text-align: right;"
							:placeholder="newList==''? '请选择时间': newList" @click="show = true" />
					</u-form-item>
					<u-form-item label="四、活动地址:">
						<u-input v-model="form.address" placeholder-style="color: #999999; text-align: right;"
							placeholder="旭辉·湖山原著" disabled="true"  />
					</u-form-item>
					<u-form-item label="五、活动内容:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left; " placeholder="请输入活动内容" />
					</u-form-item>
					<u-form-item label="六、活动要求:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left; " placeholder="请输入活动要求" />
					</u-form-item>
					<u-form-item label="七、活动具体操作:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left; " placeholder="请输入活动内容" />
					</u-form-item>
					<u-form-item label="八、活动可行性分析和安全保障措施:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left; " placeholder="请输入活动内容" />
					</u-form-item>
				</u-form>
				<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			</uni-card>
		</view>
		<view class="button">
			<u-button type="primary" style="flex: 1;">取消</u-button>
			<u-button type="success" style="flex: 1;">确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form表单
				form: {
					type: '',
					title: '',
					address: '',
					describe: '',
					chargePerson: '',
					Executor: '',
					Maintenance: '',
					end: ''
				},
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				newList: '',
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				this.newList = e[0].label
				console.log(this.newList)
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newNotice {

		.mail_List {
			z-index: 99;
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #999999;
				font-size: 40rpx;
				background-color: #e5e5e5;
			}

			.order {
				text-align: center;
			}
		}

		/deep/.card {
			.u-input__input {
				text-align: right;
			}

			u-form-item:nth-child(5) {
				.u-input__input {
					text-align: left;
					min-height: 38rpx !important;
				}
			}
			
			u-form-item:nth-child(6) {
				.u-input__input {
					text-align: left;
					min-height: 38rpx !important;
				}
			}
			
			u-form-item:nth-child(7) {
				.u-input__input {
					text-align: left;
					min-height: 38rpx !important;
				}
			}
			
			u-form-item:nth-child(8) {
				.u-input__input {
					text-align: left;
					min-height: 38rpx !important;
				}
			}

			.u-form-item--left {
				flex: unset !important;
				width: unset !important;
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			// top: 114rpx;
			left: 20rpx;
		}

		/deep/.second_card {
			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 18rpx 32rpx;
			}

			.uni-card__content {
				padding: 0 24rpx !important;
			}
		}

		/deep/.uni-border {
			z-index: unset!important;
			border-radius: unset !important;
			margin: 24rpx 0 !important;
		}

		.uni-border[data-v-19622063]:after {
			border: unset;
		}

		/deep/.uni-border.data-v-19622063:after {
			border: unset;
		}

		.slot-btn {
			display: flex;
			flex-direction: column;
			width: 200rpx;
			height: 280rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #e5e5e5;

			.add_Photo {
				margin-top: 10rpx;
				color: #cccccc;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		/deep/.button {
			display: flex;
			// position: fixed;
			// left: 0;
			// right: 0;
			// bottom: 0;
			margin-top: 200rpx;
			border-radius: 14rpx;
			overflow: hidden;
			z-index: 9;

			.u-btn {
				border-radius: unset;
			}
		}
	}
</style>
